<template>
	<div class="common">
		<div class="top">
			<h1>{{ $t('menu.overview') }}</h1>
		</div>


		<el-container class="common-layout">
			<el-aside class="aside">
				<left></left>
			</el-aside>
			<el-main class="main">
				<RouterView></RouterView>
			</el-main>

		</el-container>


	</div>

</template>

<script>
	import left from "@/components/Left.vue"
	import {
		RouterView
	} from 'vue-router'

	export default {
		components: {
			left
		},
		mounted() {
			// 如果当前路径正好是 /overview，则重定向到默认子页面
		 if (this.$route.path === '/overview') {
				this.$router.replace('/overview/first')
			}
		}
	}
</script>

<style scoped>
	.common {
		width: 100%;
		height: 100%;

	}

	.top {
		width: 60%;
		margin: 20px auto;
		/* 上下20px，左右自动居中 */
	}

	h1 {
		color: #000;
	}

	.common-layout {

		width: 60%;

		margin: 20px auto;
		/* 上下20px，左右自动居中 */
		/* 居中 */
		flex: 1;
		/* 占满除顶部外的剩余空间 */
		display: flex;
		flex-direction: row;
		align-items: stretch;
		/* 让子项高度一致 */
	}

	.aside {
		width: 150px;


		background-color: #d9d9d9;
	}

	.main {
		flex: 1;
		overflow-x: hidden;
	}
</style>
